<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
	:maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
          <span slot="label"><span style="color: red">*</span>名称</span>
          <a-input placeholder="请输入名称" v-model="model.title" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
          <span slot="label"><span style="color: red">*</span>组件名</span>
          <a-input placeholder="请输入组件名" v-model="model.component" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="图标">
          <a-input placeholder="点击右侧按钮选择图标" v-model="model.icon">
            <a-icon slot="addonAfter" type="setting" @click="selectIcons" />
          </a-input>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="参数">
          <v-json-editor :options="{ mode: 'code' }" v-model="model.params"></v-json-editor>
        </a-form-item>
      </a-form>
    </a-spin>
    <!-- 选择图标 -->
    <icons
      @choose="handleIconChoose"
      ref="icons"
      @close="handleIconCancel"
      :iconChooseVisible="iconChooseVisible"
    ></icons>
  </a-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import Icons from '@/views/system/modules/icon/Icons'
import VJsonEditor from 'v-jsoneditor'

export default {
  name: 'TpFormCustomModal',
  components: {
    Icons,VJsonEditor
  },
  data() {
    return {
      title: '操作',
      visible: false,
      iconChooseVisible: false,
      model: { span: 24 },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/form/tpFormCustom/add',
        edit: '/form/tpFormCustom/edit',
      },
    }
  },
  created() {},
  methods: {
    handleIconCancel() {
      this.iconChooseVisible = false
    },
    handleIconChoose(value) {
      this.model.icon = value
      this.iconChooseVisible = false
    },
    selectIcons() {
      this.iconChooseVisible = true
      if (this.model.icon == null || this.model.icon == '') {
        this.$refs.icons.activeIndex = ''
      } else {
        this.$refs.icons.activeIndex = this.model.icon
      }
    },
    add() {
      this.edit()
    },
    edit(record) {
      if (record) {
        this.model = record
      }
      this.visible = true
    },
    close() {
      this.model = { span: 24 }
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      that.confirmLoading = true
      let httpurl = ''
      let method = ''
      if (!this.model.id) {
        httpurl += this.url.add
        method = 'post'
      } else {
        httpurl += this.url.edit
        method = 'put'
      }
      let formData = this.model
      //时间格式化

      console.log(formData)
      if(!this.model.title){
        this.$message.warning("请输入名称")
        that.confirmLoading = false
        return false
      }
      if(!this.model.component){
        this.$message.warning("请输入组件名")
        that.confirmLoading = false
        return false
      }
      httpAction(httpurl, formData, method)
        .then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.$emit('ok')
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
          that.close()
        })
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>

<style lang="less" scoped>
</style>